<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="partial/layout" lang="zh">
<head>
    <style type="text/css">
    </style>
    <link href="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/css/prism.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="main">
    <div class="detailcontainer">
        <div class="infosbox">
            <div class="newsview">
                <h3 class="news_title">{{articleItem.title}}</h3>
                <div class="bloginfo">
                    <ul>
                        <li class="author"><a href="/">{{articleItem.author}}</a></li>
                        <li class="lmname"><a href="/">{{articleItem.categoryName}}</a></li>
                        <li class="timer">{{articleItem.publishTime}}</li>
                        <li class="view">{{articleItem.showCount}}</li>
                    </ul>
                </div>
                <div v-if="articleItem.articleTags" class="tags">
                    <a href="javascript:void(0)" target="_blank" v-for="tag in articleTagAliaName"> {{tag}} </a>
                </div>
                <div class="news_about" v-show="articleItem.abstractContent!=''">
                    <strong>简介</strong>{{articleItem.abstractContent}}
                </div>
                <div class="news_con" v-html="articleItem.content"></div>
            </div>
        </div>
    </div>
    <div class="sidebardetail" v-show="RelvantArticle.length>0">
        <div class="tuijian">
            <h2 class="hometitle">相关推荐</h2>
            <ul class="tjpic">
                <i><img :src="randomBannerItem.imgSrc"></i>
                <p>{{randomBannerItem.title}}</p>
            </ul>
            <ul class="sidenews">
                <li v-for="item in RelvantArticle">
                    <p>
                        <a :href="['/detail/'+item.id]">{{item.title}}</a>
                    </p> <span>{{item.publishTime}}</span>
                </li>

            </ul>
        </div>
    </div>
</div>
</div>
<div layout:fragment="js">
    <script src="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/plugin.min.js"></script>
    <script th:inline="javascript" type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                articleItem: {
                    status: '0',
                    title: '', // 文章题目
                    author: '',
                    categoryId: 0,
                    categoryName: '',
                    content: '', // 文章内容
                    abstractContent: '', // 文章摘要
                    coverImageList: [], // 文章图片
                    publishTime: undefined, // 前台展示时间
                    showStyle: 0,
                    id: 0,
                    openComment: 0,//打开评论
                    articleTags: [],
                },
                articleTagAliaName: [],
                randomBannerItem: {},
                RelvantArticle: [],
                showMore: true,
                loading: true,
                offset: 300,
                offset_opacity: 1200,
                scroll_top_duration: 700,
                scrollTop: 0,
                defaultfollowUsPosition: 0,
                followUsPosition: 0
            },
            mounted() {
                // 缓存指针
                let _this = this;
                _this.defaultfollowUsPosition = this.$refs.followUs.offsetTop;
                // 注册scroll事件并监听
                window.addEventListener('scroll', () => {
                    var scrollTop = document.documentElement.scrollTop;
                    _this.scrollTop = scrollTop;
                    var followUsPosition = this.$refs.followUs.offsetTop;
                    _this.followUsPosition = followUsPosition;
                    if (scrollTop <= _this.defaultfollowUsPosition) {
                        _this.followUsPosition = _this.defaultfollowUsPosition;
                    }
                })

            },
            created() {
                this.initArticleModel();
                this.getRelvantArticle();
                this.getRandomBanner();
            },
            methods: {
                initArticleModel() {
                    var articleModel = [[${articleModel}]];
                    var articleTagAliaName = [[${tagList}]];
                    if (articleModel != null) {
                        this.articleItem.status = articleModel.status;
                        this.articleItem.title = articleModel.title;
                        this.articleItem.author = articleModel.author;
                        this.articleItem.content = articleModel.content;
                        this.articleItem.abstractContent = articleModel.abstractContent;
                        this.articleItem.coverImageList = articleModel.coverImageList;
                        this.articleItem.publishTime = articleModel.publishTime;
                        this.articleItem.id = articleModel.id;
                        this.articleItem.showStyle = articleModel.showStyle;
                        this.articleItem.categoryId = articleModel.categoryId;
                        this.articleItem.categoryName = articleModel.category.categoryName;
                        this.articleItem.openComment = articleModel.openComment;
                        this.articleItem.articleTags = articleModel.articleTags;
                        var tagLists = articleModel.articleTags.split(',');
                        this.articleItem.articleTags = tagLists;
                        this.articleTagAliaName = articleTagAliaName;
                    }
                },
                getRandomBanner() {
                    var _this = this;
                    $.ajax({
                        type: "POST",
                        url: "/getBannerlist",
                        data: {},
                        success: function (result) {
                            if (result.code == 0) {
                                var resultCount = result.data.rows.length;
                                if (resultCount > 0) {
                                    var random = parseInt(Math.random() * resultCount, 10);
                                    _this.randomBannerItem = result.data.rows[random];
                                }
                            }
                        }
                    });
                },
                getRelvantArticle() {
                    var _this = this;
                    var param = {articleId: this.articleItem.id, tagIds: this.articleItem.articleTags.join(",")};
                    $.ajax({
                        type: "POST",
                        url: "/getRelvantArticle",
                        data: param,
                        success: function (result) {
                            if (result.code == 0) {
                                _this.RelvantArticle = result.data;
                            }
                        }
                    });

                },
                backToTop() {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                }
            }
        })
    </script>
</div>
</body>
</html>